<style scoped>
    .expand-row{
        margin-bottom: 16px;
    }
</style>
<template>
    <Modal v-model="formVisible" :title="modal && modal.id ? '修改' : '新增'" class="modal-content" width="900" :mask-closable="false"  @keydown.enter.native="handleSubmit" ref="ModalForm">
            <Form :model="modal" :rules="rule" ref="form2" label-position="right" :label-width="110" class="myOpenFrom">
                <!-- <FormItem label="上级机构">
                  <treeselect :options="optionsParent" :default-expand-level="1" @select="selectOne" noChildrenText="没有子节点" noOptionsText="暂无选项" noResultsText="没有发现结果" :value="value" placeholder="选择上级机构" v-model="modal.deptId" :disabled="modal&&modal.id?true:false" />
                </FormItem> -->
                <FormItem label="小区" prop="housingId">
                    <el-select v-model="modal.housingId" filterable default-first-option placeholder="请选择小区" style="width:100%" no-data-text="暂无数据"  @change="modalhousechange">
                        <el-option v-for="item in modalhouseList"  :key="item.id" :label="item.name" :value="item.id">
                        </el-option>
                    </el-select>
                </FormItem>
                <FormItem label="组团" prop="groupName">
                    <!-- <Button type="primary" size="large">添加组团</Button> -->
                    <el-select v-model="modal_groupName" filterable allow-create default-first-option placeholder="请选择组团" style="width:100%" no-data-text="暂无数据" @change="modalgroupNamechange">
                        <el-option v-for="item in groupList" :key="item.label" :label="item.label" :value="item.label">
                        </el-option>
                    </el-select>
                </FormItem>
                <FormItem label="楼栋" prop="building">
                    <el-select v-model="modal_building" filterable allow-create default-first-option placeholder="请选择楼栋" no-data-text="暂无数据" style="width:100%"  @change="modalbuildingchange">
                        <el-option v-for="item in buildingList" :key="item.label" :label="item.label" :value="item.label">
                        </el-option>
                    </el-select>
                    <!-- <Button type="primary" size="large">添加楼栋</Button> -->
                </FormItem>
                <FormItem label="单元" prop="unit">
                    <el-select v-model="modal_unit" filterable allow-create default-first-option placeholder="请选择单元" no-data-text="暂无数据" style="width:100%">
                        <el-option v-for="item in unitList"  :key="item.label" :label="item.label" :value="item.label">
                        </el-option>
                    </el-select>
                </FormItem>
                <FormItem label="房间号" prop="room">
                    <Input v-model="modal.room" placeholder="房间号"></Input>
                </FormItem>
                <FormItem label="建筑面积" prop="architectureArea">
                  <Input v-model="modal.architectureArea" placeholder="建筑面积"></Input>
                </FormItem>
                <FormItem label="套内面积" prop="insideArea">
                  <Input v-model="modal.insideArea" placeholder="套内面积"></Input>
                </FormItem>
                <FormItem label="公摊面积" prop="publicArea">
                  <Input v-model="modal.publicArea" placeholder="公摊面积"></Input>
                </FormItem>
                <FormItem label="房屋状态" prop="status">
                    <RadioGroup v-model="modal.status">
                      <Radio label="1">入住</Radio>
                      <Radio label="2">未装修</Radio>
                      <Radio label="3">出租</Radio>
                      <Radio label="4">空置</Radio>
                    </RadioGroup>
                </FormItem>
                <!-- <FormItem label="关联小区" :hidden="this.typeInt==1 ? true : false">
                  <treeselect :multiple="true" :default-expand-level="2" :options="options" noChildrenText="没有子节点" noOptionsText="暂无选项" noResultsText="没有发现结果" @open="selectDepart()" :value="value" :show-count="true" valueConsistsOf="LEAF_PRIORITY" placeholder="选择小区" v-model="modal.houseList" />
                </FormItem> -->
                <!-- <FormItem label="小区" :hidden="houseshow==1 ? true : false" >
                    <Select v-model="modal.houseList" placeholder="请选择小区" style="width:100%" multiple>
                        <Option v-for="item in houseL" :value="item.id" :key="item.id">{{ item.name }}</Option>
                    </Select>
                </FormItem> -->
            </Form>

            <div slot="footer">
                <Button type="text" size="large" @click="onCancel">取消</Button>
                <Button type="primary" size="large" @click="handleSubmit" :loading="formLoading">确定</Button>
            </div>

        </Modal>
</template>
<script>
    //modal的小区变化
    let modalhousechange=function(value){
      console.log("选中了"+value);
      if (value) {
            this.modal_building='';
            this.modal_groupName='';
            this.modal_unit='';
            this.groupList=[];//组团
            this.buildingList=[];//楼栋
            this.unitList=[];//单元
            this.getRequest("/api/room/queryGroupName?housingId="+value).then(res => {

              console.log(res)
              if(res.data.groupList!=null){
                    this.groupList = res.data.groupList;
              }else if(res.data.buildList!=null){
                    this.buildingList = res.data.buildList;
              }else{
                    this.unitList = res.data.unitList;
              }
        });
      }
    }
    //modal的组团变化
    let modalgroupNamechange=function(value){
      console.log("选中了"+value);
      if (value) {
        this.modal_building='';
        this.modal_unit='';
        this.buildingList=[];//楼栋
        this.unitList=[];//单元
        this.getRequest("/api/room/queryBuilding?groupName="+value+"&housingId="+this.modal.housingId).then(res => {
            console.log(res)
            if(res.data.buildList!=null){
                this.buildingList = res.data.buildList;
            }else{
                this.unitList = res.data.unitList;
            }
        });
      }else{
        this.$Message.info("请先选择上一级");
      }
    }
    //modal的楼栋变化
    let modalbuildingchange=function(value){
      console.log("选中了"+value);
      if (value) {
            this.modal_unit='';
            this.unitList=[];//单元
            this.getRequest("/api/room/queryUnit?building="+value+"&housingId="+this.modal.housingId+"&groupName="+this.modal.groupName).then(res => {
              console.log(res)
              this.unitList = res.data.unitList;
          });
      }else{
        this.$Message.info("请先选择上一级");
      }
    }
    export default {
        name: 'ModalForm',
        data() {
            return {
                formLoading:false,
                formVisible:false,
                modal_unit:'',//单元
                modal_groupName:'',//组团
                modal_building:'',//楼栋
                modal: {},
                unitList:[],
                groupList=[],
                buildingList=[],
            }
        },
        methods:{
            modalhousechange,
            modalgroupNamechange,
            modalbuildingchange,
            handleSubmit() {
                this.$refs.ModalForm.validate((valid) => {
                    if (valid) {
                        let params=this.modal;
                        params.groupName=this.modal_groupName;
                        params.building=this.modal_building;
                        params.unit=this.modal_unit;
                        this.$emit('on-success-valid', {
                            param: params,
                            password: this.form.password
                        })
                    }
                })
            }
        }
    };
</script>